<template>
	<view class="page">
		<!-- 填写信息 wwl -->
		<view class="list">
			<view class="row">
				<view class="left">
					姓名
				</view>
				<view class="right">
					<input type="text" maxlength="20" v-if="authorizestatus == 0" class="right_input" v-model="infoObj.name" placeholder="请填写姓名"
						placeholder-class="text2" />
					<input type="text" maxlength="20" v-if="authorizestatus == 1" class="right_input" v-model="authorizelist.name" 
							placeholder-class="text2" />
				</view>
			</view>
			<view class="row">
				<view class="left">
					电话
				</view>
				<view class="right">
					<input type="number" maxlength="11" v-if="authorizestatus == 0" class="right_input" v-model="infoObj.phone" placeholder="请填写电话"
						placeholder-class="text2" />
					<input type="number" maxlength="11" v-if="authorizestatus == 1" class="right_input" v-model="authorizelist.phone" placeholder-class="text2" />
				</view>
			</view>
			<cityOptions @change='changeCity' :active='authorizelist.zone_arr ? authorizelist.zone_arr :[]'>
				<template slot="info">
					<view class="row">
						<text class="left">所在区域</text>
						<view class="right right2">
							<view class="text1" v-if="infoObj.zone_id">{{regionName}}</view>
							<view class="text2" v-else>请选省/市/区</view>
							<n-icon name="right" size="32" color='#A4A4A4'></n-icon>
						</view>
					</view>
				</template>
			</cityOptions>
		</view>
		<view class="button_box" v-if="authorizestatus == 0">
			<button class="button" @click='onSave()' :loading="applyLoading">提交审核</button>
		</view>
		<view class="button_box" v-if="authorizestatus == 1">
			<view class="button" v-if="authorizelist.status == 1">审核通过</view>
			<view class="button" v-if="authorizelist.status == 2">驳回</view>
			<view class="button" v-if="authorizelist.status == 3">审核中</view>
		</view>
	</view>
</template>

<script>
	import {setBusinessCooperation ,setRoleList,setAccredit,getAuthorize} from "./static/api.js"
	export default {
		data() {
			return {
				authorizelist:[],
				authorizestatus:0,
				regionName:'',
				infoObj:{
					shopping_id:'',
					zone_id:'',
					name:'',
					phone:'',
				},
				applyLoading:false
			}
		},
		methods: {
			 changeCity(e) {
				this.regionName = e.name
				this.infoObj.zone_id = e.code[e.code.length-1]
			 },
			async onSave(){
				if(this.applyLoading) return
				if (!this.$regular.funShowToast('name', this.infoObj.name , '请填写姓名！')) return false
				if (!this.$regular.funShowToast('phone', this.infoObj.phone , '请填写电话！')) return false
				if (!this.$regular.funShowToast(null, this.infoObj.zone_id , '请选择省/市/区！')) return false
				this.applyLoading = true
				try{
					var res = await setAccredit(this.infoObj)
					this.applyLoading = false
					if(res.code != null){
						uni.showToast({title:res.data,icon:'none'});
					}else{
						uni.showToast({title:'已提交申请'})
						// uni.showToast({title:'提交成功'})
						setTimeout(()=>{
							uni.navigateBack()
						},300)
					}
					
				}catch{
					this.applyLoading = false
				}
			 },
			 async getAuthorize(){
			 	uni.showLoading()
			 	this.loading = true
			 	try{
			 		var ress = await getAuthorize(this.infoObj);
			 		console.log(ress,'查询店铺');
			 		
			 		if(ress.code == 200){
			 			this.authorizelist = ress.data;
						this.authorizestatus = 1;
			 		}
			 		
			 		uni.hideLoading()
			 		this.loading = false
			 	}catch{
			 		this.loading = false
			 		uni.hideLoading()
			 	}
			 },
			 
		},
		onLoad(params) {
			this.infoObj.shopping_id = params.id
			this.getAuthorize();
		}
	}
</script>

<style lang="scss" scoped>
	.page{
		min-height: 100vh;
		background-color: #F6f7f8;
	}
	.row {
		background-color: #fff;
		width: 100%;
		padding: 38rpx 29rpx 31rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		.left {
			font-size: 32rpx;
			line-height: 44rpx;
			color: #26252B;
		}
		.right {
			width: calc(100% - 5em);
			text-align: right;
		}
	
		.right_input {
			width: 100%;
		}
	
		.right3 {
			display: flex;
			flex-wrap: wrap;
		}
	
		.row_key {
			display: flex;
			align-items: center;
	
			.text_type {
				width: 40rpx;
				text-align: center;
			}
	
			text {
				margin: 0rpx 10rpx;
			}
		}
	
		.right2 {
			display: flex;
			justify-content: space-between;
	
			>view:nth-child(1) {
				width: calc(100% - 40rpx);
				// text-align: right;
			}
		}
	}
	/deep/ .text2 {
		font-size: 32rpx;
		line-height: 44rpx;
		color: #ADADAD;
	}
	.button_box {
		padding: 30rpx 0;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		z-index: 9;
	}

	.button {
		text-align: center;
		width: 674rpx;
		margin: 0 auto;
		height: 88rpx;
		line-height: 88rpx;
		background: linear-gradient(270deg, #ff7a1f, #ff9760);
		border-radius: 16rpx;
		color: #FFFFFF;
		font-size: 30rpx;
	}
	button[loading]::before{
			align-self:center
		}
		button{
			display: flex;
			justify-content: center;
			align-item:center;
			padding: 0;
		}
		button::after{
			border: none;
		}

</style>
